<template>
  <div :class="classNames">
    <headers
      :mode="computedMode"
      :title="headerTitle"
      :value="headerValue"
      :header-operations="headerOperations"
    ></headers>
    <div class="arco-calendar-body">
      <div class="arco-picker-body">
        <div v-for="(item, index) in rows" :key="index" class="arco-picker-row">
          <!-- :class="getCellClassName(items)"
          @click="onCellClick(items)" -->
          <div
            v-for="(items, indexs) in item"
            :key="indexs"
            :class="getCellClassName(items)"
            @click="onCellClick(items)"
          >
            <div class="arco-picker-date">
              <div class="arco-picker-date-value">
                {{ items.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- {{ pageShowDate.month() }}
        {{ rows }} -->
    </div>
    <!-- {{ modelValue }} -->
  </div>
</template>

<script lang="ts">
import dayjs from "dayjs";
import weekday from "dayjs/plugin/weekday";
dayjs.extend(weekday);
import { computed, defineComponent, ref, toRefs } from "vue";
// import month from "./month.vue";
import headers from "./header.vue";
import { newArray } from "./utils";

const Calendar = defineComponent({
  name: "Calendar",
  components: {
    headers,
  },
  props: {
    value: {
      type: Object,
    },
    mode: {
      type: String,
      default: "month",
    },
    dayStartOfWeek: {
      type: Number,
      default: 0,
    },
    headerValue: {
      type: Object,
      required: true,
    },
    headerOperations: {
      type: Object,
    },
  },
  emits: ["select", "cell-click"],
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  setup(props, { emit }) {
    const prefixCls = "arco-picker";

    const CELL_COUNT = 12;
    const ROW_COUNT = 4;
    const COL_COUNT = 3;

    const { dayStartOfWeek, headerValue } = toRefs(props);

    const computedMode = computed(() => {
      return props.mode;
    });

    const headerTitle = computed(() => headerValue.value.format("YYYY-MM"));

    const weekList2 = computed(() => {
      const list = [0, 1, 2, 3, 4, 5, 6];
      const index2 = Math.max(dayStartOfWeek.value % 7, 0);
      return [...list.slice(index2), ...list.slice(0, index2)];
    });

    const MONTH_LIST = [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ];

    const rows = computed(() => {
      const year = headerValue.value.year();
      const flatData = newArray(CELL_COUNT).map((_, index2) => ({
        label: MONTH_LIST[index2],
        value: dayjs(`${year}-${index2 + 1}`),
      }));
      const rows2 = newArray(ROW_COUNT).map((_, index2) =>
        flatData.slice(index2 * COL_COUNT, (index2 + 1) * COL_COUNT),
      );
      return rows2;
      //   const startDate = dayjs(headerValue.value).startOf("month");
      //   const startDay = startDate.day();
      //   const days = startDate.daysInMonth();
      //   const startIndex = weekList2.value.indexOf(startDay);
      //   const flatData = newArray(CELL_COUNT);
      //   for (let i = 0; i < flatData.length; i++) {
      //     const calendarData = getCellData(
      //       dayjs(startDate).add(i - startIndex, "day"),
      //     );
      //     Object.assign(calendarData, {
      //       isPrev: i < startIndex,
      //       isNext: i > startIndex + days - 1,
      //     });
      //     flatData[i] = calendarData;
      //   }
      //   // console.log(flatData, "我找不到");
      //   const rows2 = newArray(ROW_COUNT).map((_, index2) => {
      //     const row = flatData.slice(
      //       index2 * COL_COUNT,
      //       (index2 + 1) * COL_COUNT,
      //     );
      //     console.log(row, "我找不到");
      //     // const valueOfWeek = row[0].value;
      //     // console.log(valueOfWeek, "我无语了");
      //     // row.unshift({
      //     //   // label: valueOfWeek.week(),
      //     //   value: valueOfWeek,
      //     // });
      //     return row;
      //   });
      //   return rows2;
    });
    console.log(rows, "我是rows");
    // 格式
    const format = "YYYY-MM-DD";
    // 默认值
    const _value = ref(dayjs(headerValue.value, format));
    const computedValue = computed(() => {
      if (headerValue.value) {
        return dayjs(headerValue.value, format);
      }
      return _value.value;
    });
    const pageShowDate = ref(computedValue.value || dayjs());

    const classNames = computed(() => [prefixCls]);

    // function selectHandler(time, disabled = false) {
    //   if (!disabled) {
    //     move(time);
    //   }
    // }

    // function onChangePageDate(time) {
    //   pageShowDate.value = time;
    //   emit("panelChange", time.toDate());
    // }

    // function move(time) {
    //   _value.value = time;
    //   emit("change", time.toDate());
    //   emit("update:modelValue", time.toDate());
    //   onChangePageDate(time);
    // }

    function onCellClick(cellData) {
      // props.selectHandler(params.time, false);
      console.log(cellData.value, "我是日历吗");
      emit("cell-click", cellData.value);
    }

    const getCellClassName = computed(() =>
      useCellClassName({
        prefixCls,
        mergedValue: props.value,
        // isSameTime: (current, target) => current.isSame(target, "day"),
      }),
    );

    function useCellClassName({ prefixCls, mergedValue }) {
      return function getCellClassName(cellDateObj) {
        // const rangeStart = getDateValue(rangeValues, 0);
        // const rangeEnd = getDateValue(rangeValues, 1);
        // const hoverRangeStart = getDateValue(hoverRangeValues, 0);
        // const hoverRangeEnd = getDateValue(hoverRangeValues, 1);
        const isInView = !cellDateObj.isPrev && !cellDateObj.isNext;
        // const rangeAvailable = isInView && panel;
        // const isRangeStart =
        //   rangeAvailable && rangeStart && isSameTime(cellDateObj.time, rangeStart);
        // const isRangeEnd =
        //   rangeAvailable && rangeEnd && isSameTime(cellDateObj.time, rangeEnd);
        // const nearRangeStart =
        //   hoverRangeStart && rangeStart && hoverRangeStart.isBefore(rangeStart);
        // const nearRangeEnd =
        //   rangeEnd && hoverRangeEnd && hoverRangeEnd.isAfter(rangeEnd);
        // const isHoverNearRange =
        //   (nearRangeStart && isRangeStart) || (nearRangeEnd && isRangeEnd);
        const isToday = dayjs().isSame(cellDateObj.value, "month");
        console.log(isToday, "我是today??");
        // console.log(cellDateObj.time.day(), "我服了");
        // if (!panel && innerMode === "year") {
        //   isToday = dayjs().getNow().isSame(cellDateObj.time, "date");
        // }
        return [
          `${prefixCls}-cell`,
          {
            [`${prefixCls}-cell-in-view`]: isInView,
            [`${prefixCls}-cell-today`]: isToday,
            [`${prefixCls}-cell-selected`]:
              mergedValue &&
              dayjs(mergedValue).isSame(cellDateObj.value, "day"),
            // [`${prefixCls}-cell-range-start`]: isRangeStart,
            // [`${prefixCls}-cell-range-end`]: isRangeEnd,
            // [`${prefixCls}-cell-in-range`]:
            //   rangeAvailable && isInRange(cellDateObj.time, rangeStart, rangeEnd),
            // [`${prefixCls}-cell-in-range-near-hover`]: isHoverNearRange,
            // [`${prefixCls}-cell-hover-range-start`]:
            //   rangeAvailable &&
            //   hoverRangeStart &&
            //   isSameTime(cellDateObj.time, hoverRangeStart),
            // [`${prefixCls}-cell-hover-range-end`]:
            //   rangeAvailable &&
            //   hoverRangeEnd &&
            //   isSameTime(cellDateObj.time, hoverRangeEnd),
            // [`${prefixCls}-cell-hover-in-range`]:
            //   rangeAvailable &&
            //   isInRange(cellDateObj.time, hoverRangeStart, hoverRangeEnd),
            // [`${prefixCls}-cell-disabled`]: disabled,
          },
        ];
      };
    }

    return {
      classNames,
      pageShowDate,
      computedMode,
      computedValue,
      // selectHandler,
      weekList2,
      rows,
      headerTitle,
      getCellClassName,
      onCellClick,
    };
  },
});
export default Calendar;
</script>

<style lang="scss">
.arco-picker-body {
  padding: 14px 16px;
}
.arco-picker-row {
  display: flex;
  padding: 2px 0;
}
.arco-picker-cell {
  flex: 1;
  height: 74rpx;
}
.arco-picker-cell .arco-picker-date {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 4px 0;
  cursor: pointer;
}
.arco-picker-date-value {
  width: 100%;
  border-radius: 24px;
  height: 24px;
  color: $color-text-4;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}

.arco-picker-cell-in-view .arco-picker-date-value {
  color: $color-text-1;
  font-weight: 500;
}
.arco-picker-cell-selected .arco-picker-date-value {
  color: $color-white;
  background-color: $primary-6;
  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
}
.arco-picker-cell-in-view:not(.arco-picker-cell-selected):not(
    .arco-picker-cell-range-start
  ):not(.arco-picker-cell-range-end):not(.arco-picker-cell-disabled):not(
    .arco-picker-cell-week
  )
  .arco-picker-date-value:hover {
  color: $color-text-1;
  background-color: $color-fill-3;
}

.arco-picker-cell-today {
  position: relative;
}
.arco-picker-cell-today::after {
  position: absolute;
  bottom: -2px;
  left: 50%;
  display: block;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  background-color: $primary-6;
  border-radius: 50%;
  content: "";
}
</style>
